<template>
    <div class="main-container">
        <div class="profile-section">
            <div class="left-panel">
                <Avatar :avatarUrl="user.avatar" @avatar-changed="updateAvatar" />

                <!-- 用户名和标题的编辑状态 -->
                <div v-if="!isEditing" class="user-info-static">
                    <h2 class="username">{{ user.name }}</h2>
                    <p class="user-title">{{ user.title }}</p>
                </div>
                <div v-else class="user-info-edit">
                    <input v-model="editUser.name" class="edit-input" placeholder="用户名">
                    <input v-model="editUser.title" class="edit-input" placeholder="职位标题">
                </div>
            </div>

            <div class="right-panel">
                <div class="info-card">
                    <!-- 编辑按钮区域 -->
                    <div class="card-header">
                        <h3>基本信息</h3>
                        <button v-if="!isEditing" @click="startEditing" class="edit-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                            </svg>
                            编辑
                        </button>
                        <div v-else class="edit-actions">
                            <button @click="saveEditing" class="save-btn">保存</button>
                            <button @click="cancelEditing" class="cancel-btn">取消</button>
                        </div>
                    </div>

                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">邮箱:</span>
                            <span v-if="!isEditing" class="value">{{ user.email }}</span>
                            <input v-else v-model="editUser.email" class="edit-input">
                        </div>
                        <div class="info-item">
                            <span class="label">电话:</span>
                            <span v-if="!isEditing" class="value">{{ user.phone }}</span>
                            <input v-else v-model="editUser.phone" class="edit-input">
                        </div>
                        <div class="info-item">
                            <span class="label">部门:</span>
                            <span v-if="!isEditing" class="value">{{ user.department }}</span>
                            <input v-else v-model="editUser.department" class="edit-input">
                        </div>
                        <div class="info-item">
                            <span class="label">职位:</span>
                            <span v-if="!isEditing" class="value">{{ user.position }}</span>
                            <input v-else v-model="editUser.position" class="edit-input">
                        </div>
                        <div class="info-item">
                            <span class="label">入职日期:</span>
                            <span v-if="!isEditing" class="value">{{ user.joinDate }}</span>
                            <input v-else v-model="editUser.joinDate" type="date" class="edit-input">
                        </div>
                        <div class="info-item">
                            <span class="label">状态:</span>
                            <span v-if="!isEditing" class="value status-active">{{ user.status }}</span>
                            <select v-else v-model="editUser.status" class="edit-input">
                                <option value="在职">在职</option>
                                <option value="休假">休假</option>
                                <option value="离职">离职</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Avatar from './Avatar.vue';
    import { ref } from 'vue';

    export default {
        name: 'Main',
        components: {
            Avatar
        },
        setup() {
            const user = ref({
                name: '张三',
                title: '高级前端开发工程师',
                email: 'zhangsan@example.com',
                phone: '+86 138 0013 8000',
                department: '技术部 - 前端组',
                position: '技术专家',
                joinDate: '2020-06-15',
                status: '在职',
                avatar: ''
            });

            const isEditing = ref(false);
            const editUser = ref({});

            const updateAvatar = (newAvatarUrl) => {
                user.value.avatar = newAvatarUrl;
            };

            const startEditing = () => {
                // 创建编辑用的用户数据副本
                editUser.value = {...user.value};
                isEditing.value = true;
            };

            const cancelEditing = () => {
                isEditing.value = false;
            };

            const saveEditing = () => {
                // 将编辑的数据保存到用户数据中
                user.value = {...editUser.value};
                isEditing.value = false;

                // 这里可以添加API调用以保存到后端
                console.log('用户信息已更新:', user.value);
            };

            return {
                user,
                isEditing,
                editUser,
                updateAvatar,
                startEditing,
                cancelEditing,
                saveEditing
            };
        }
    }
</script>

<style scoped>
    .main-container {
        width: 100%;
        min-height: 400px;
        border: 5px solid #999;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        padding: 30px;
        background: #fff;
    }

    .profile-section {
        display: flex;
        gap: 30px;
        height: 100%;
    }

    .left-panel {
        flex: 0 0 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .username {
        margin: 20px 0 5px;
        color: #333;
        font-size: 24px;
    }

    .user-title {
        color: #666;
        margin: 0;
        font-size: 14px;
    }

    .user-info-edit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }

    .edit-input {
        width: 100%;
        padding: 8px 12px;
        margin: 5px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .info-card {
        background: #f9f9f9;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        height: 100%;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #4a69bd;
    }

    .info-card h3 {
        margin: 0;
        color: #333;
        font-size: 20px;
    }

    .edit-btn {
        background: #4a69bd;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }

    .edit-btn:hover {
        background: #3c5aa6;
    }

    .edit-actions {
        display: flex;
        gap: 10px;
    }

    .save-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }

    .save-btn:hover {
        background: #218838;
    }

    .cancel-btn {
        background: #dc3545;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }

    .cancel-btn:hover {
        background: #c82333;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .info-item {
        display: flex;
        flex-direction: column;
    }

    .label {
        font-weight: 600;
        color: #555;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .value {
        color: #333;
        font-size: 16px;
    }

    .info-item input, .info-item select {
        width: 100%;
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .status-active {
        color: #28a745;
        font-weight: 600;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .profile-section {
            flex-direction: column;
        }

        .left-panel {
            flex: none;
            margin-bottom: 20px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .main-container {
            padding: 15px;
        }

        .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
    }
</style>